<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DLSS Swapper Translator Tool</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container-fluid">
      <h1>DLSS Swapper Translator Tool</h1>

      <div class="alert alert-warning" role="alert">
        <b>Under construction</b> - Please use Translation Toolbox in DLSS Swapper instead. See our <a href="https://github.com/beeradmoore/dlss-swapper/wiki/Translation-Guide" target="_blank">translation guide</a> for more information.
      </div>

      <table class="table table-bordered table-equal-width table-striped">
        <thead>
          <tr>
            <th scope="col">Key</th>
            <th scope="col">English</th>
            <th scope="col">Translation</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <footer class="fixed-bottom footer-bg p-3 border-top footer">
      <div class="form-check form-switch">
        <input
          type="checkbox"
          name="autoSave"
          checked
          class="form-check-input"
          id="autoSave"
        />
        <label for="autoSave" class="form-check-label">Auto save</label>
      </div>

      <div class="container-fluid d-flex justify-content-end">
        <button
          type="button"
          class="btn btn-primary me-2"
          id="loadTranslationBtn"
        >
          Load translation
        </button>
        <input type="file" id="reswFile" accept=".resw" style="display: none" />
        <button type="button" class="btn btn-success" id="saveTranslationBtn">
          Save translation
        </button>
      </div>
    </footer>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-auto-dark-mode@1.1.1/src/bootstrap-auto-dark-mode.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
